<template>
  <div class="app-container">
    <!-- 头部 -->
    <herder id="herder">
      <div
        class="pc-gridContainer row justify-content-between align-items-center"
      >
        <img
          class="col-sm-3 col-xs-12"
          src="https://yb.zhongyanauto.cn/static/images/mylogo.png"
          alt=""
        />
        <!-- 搜索框 -->
        <div v-if="$route.path === '/'" class="col-sm-4 col-xs-12 search-box">
          <div class="icon-search"></div>
          <input type="text" placeholder="请输入关键字" />
          <button type="button">搜索</button>
        </div>
      </div>
    </herder>
    <!-- 导航栏 -->
    <div class="tabs-box" :class="{ fixed: isFixed }">
      <div class="tabs">
        <div class="mobile-menu">
          <div class="mobile-menu-icon" @click="Data.drawer = true">
            <el-icon color="#fff" size="30">
              <Expand />
              <!-- <Fold /> -->
            </el-icon>
          </div>
          <div class="mobile-menu-logo">
            <img
              :src="'./txtlogo3.png'"
              alt=""
            />
          </div>
        </div>

        <div class="pc-menu">
          <Navigation />
        </div>
      </div>
    </div>
    <div class="content-container" ref="contentContainer">
      <router-view></router-view>
    </div>

    <div class="app_footer">
      <div
        class="app_footer_item"
        v-for="(item, index) in Data.tablist"
        :key="index"
        @click="handleClick(item, index)"
      >
        <i class="iconfont" :class="item.icon"></i>
        <p>{{ item.name }}</p>
      </div>
    </div>
  </div>

  <!-- 左侧菜单 -->
  <LeftMenu :drawer="Data.drawer" @update:drawer="handleMenuCollapse" />

  <!-- 二维码 -->

  <div class="dialog_box" v-if="dialogVisible" @click="handleClose">
    <div class="dialog_pad_box">
      <div class="Qrcode">
        <img src="./assets/images/qrcode.png" alt="" />
      </div>
    </div>
  </div>

  <!-- <el-dialog v-model="dialogVisible" top="40vh" :before-close="handleClose" :show-close="false">
   
  </el-dialog> -->

  <!-- 右侧功能 -->
  <RightMenu @open-qr-dialog="openQrDialog" @scrollToTop="scrollToTop" />
</template>
<script setup>
import { h, ref, reactive, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import Navigation from "./components/menu/Navigation.vue";
import LeftMenu from "./components/menu/LeftMenu.vue";
import RightMenu from "./components/right/RightMenu.vue";
const router = useRouter();
const Data = reactive({
  drawer: false,
  tablist: [
    {
      name: "二维码",
      path: "/",
      icon: "icon-erweima",
    },
    {
      name: "首页",
      path: "/",
      icon: "icon-shouye",
    },
    {
      name: "在线客服",
      path: "/",
      icon: "icon-zaixiankefu",
    },
    {
      name: "公司介绍",
      path: "/",
      icon: "icon-gongsijieshao",
    },
    {
      name: "联系我们",
      path: "/contact",
      icon: "icon-lianxiwomen",
    },
  ],
});
const isFixed = ref(false);
const dialogVisible = ref(false);
const contentContainer = ref(null); // 获取滚动容器的引用

const handleClose = () => {
  dialogVisible.value = false;
};

// 监听滚动事件
const handleScroll = () => {
  if (contentContainer.value) {
    isFixed.value = contentContainer.value.scrollTop > 0;
  }
};
const handleClick = (item, index) => {
  if (index == 0) {
    dialogVisible.value = true;
  } else {
    router.push({
      path: item.path,
      query: {
        index: index,
      },
    });
  }
};
const handleMenuCollapse = (isCollapse) => {
  Data.drawer = isCollapse;
};

// 打开二维码弹框
const openQrDialog = () => {
  dialogVisible.value = true;
};

// 回到顶部
const scrollToTop = () => {
  contentContainer.value.scrollTop = 0;
  // window.scrollTo({
  //   top: 0,
  //   behavior: "smooth", // 平滑滚动
  // });
};

onMounted(() => {
  if (contentContainer.value) {
    contentContainer.value.addEventListener("scroll", handleScroll);
  }
});

onUnmounted(() => {
  if (contentContainer.value) {
    contentContainer.value.removeEventListener("scroll", handleScroll);
  }
});
</script>

<style lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#app {
  margin: 0;
  padding: 0;
}

#herder {
  width: 100%;
  box-sizing: border-box;

  .pc-gridContainer {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;

    .search-box {
      // width: 400px;
      // max-width: 400px;
      height: 36px;
      max-height: 36px;
      border: 1px solid rgb(14, 34, 95);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;

      .icon-search {
        color: rgb(165, 165, 165);
        width: 20px;
        height: 20px;
      }

      input {
        height: 100%;
        flex: 1;
        border: none;
        border-radius: 0;
        outline: none;
      }

      button {
        outline: none;
        border: none;
        height: 100%;
        width: 65px;
        background: rgb(14, 34, 95);
        color: white;
        font-size: 12px;
      }

      button:hover {
        background: rgb(198, 107, 0);
      }
    }
  }
}

.tabs-box {
  width: 100%;
  height: 50px;
  background-color: rgb(14, 34, 95);
  transition: all 0.3s ease;

  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  .tabs {
    width: auto;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    color: white;

    img {
      max-height: 40px;
      // padding-right: 8pt;
      // padding-left: 8pt;
    }

    // background-color: red;
  }
}

.mobile-menu {
  width: 100%;
  display: none;
  height: 100%;
  align-items: center;

  .mobile-menu-icon {
    height: 30px;
    position: absolute;
    top: 0;
    left: auto;
    margin: 10px;
    box-sizing: border-box;
  }

  .mobile-menu-logo {
    width: 100%;
    text-align: center;
    // padding-right: 30px;
  }
}

.app_footer {
  width: 100%;
  // height: 50px;
  display: none;
  background-color: rgb(14, 34, 95);

  .app_footer_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;

    img {
      width: 30px;
      height: 30px;
    }

    i {
      font-size: 25px;
    }
  }
}

@media screen and (max-width: 767px) {
  #herder {
    display: none;
  }

  .mobile-menu {
    display: flex;
  }

  .news-content {
    display: block !important;
  }

  .pc-menu {
    display: none;
  }

  .left-sidebar {
    display: none !important;
  }

  .main-content {
    padding: 0 !important;
  }

  .company-info {
    padding: 0 !important;
  }

  .company-desc {
    padding: 0 20px;
  }

  .about_footer {
    display: none;
  }

  /* 添加移动端侧边栏样式 */
  .el-drawer {
    width: 70% !important;
    max-width: 200px;
  }

  .app-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .content-container {
    flex: 1;
    overflow: scroll;
    box-sizing: border-box;
  }

  .app_footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;

    p {
      margin: 0;
    }
  }

  .left-menu {
    display: block !important;
  }

  .right-menu {
    display: block !important;
  }
}

.dialog_box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .dialog_pad_box {
    width: 300px;
    height: 300px;
    background: #fff;
    position: absolute;
    background: #fff;
    .Qrcode {
      width: 100%;
      height: 300px;
      text-align: center;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
